<template>

<div class="container">
  <el-container>
      <create-header></create-header>
      
    <div class="titlebox">
        <span class="title1">上传作品</span>
    </div>
           
    <div class="uploadwork">
        <span class="title2">上传图片</span>
        <hr class="hr" width="95%" align="left"  color="lightgrey" size="1"/>
        <div class="uploadbox">
          <div class="add" @click="callFile">
            <!-- ul、li标签用于展示从本地添加的预览图片 -->
            <ul v-show="uploadImg.length!=0">
                       <li v-for="(item,index) in uploadImg"
                           :key="index"
                           class="addPic">
                       <img :src="item">
                       </li>
                      </ul>
                     <input type="file"
                          id="file"
                          accept="image/*"
                         @change="getPicture($event)">
              <div class="icon" v-show="uploadImg.length==0">
                      <i class="el-icon-circle-plus" 
                      style="font-size: 50px"></i>
                     
              </div>
                  <h3 class="text" v-show="uploadImg.length==0">支持png，jpg格式作品</h3> 
          </div>
          <button class="button1" @click="open();turntoshop()">确定</button>
        </div>
   </div>   
  </el-container>
</div>

          
</template>

<script>
import Header from "../components/Header.vue";
export default {
  name: "Create_2",
  components: {
    "create-header":Header,
  },
  data(){
			return {
				uploadImg:[],
        count:"",//倒计时
			}
		},
  	
  methods:{
    getPicture (e) {
		      //预览图片
		      let src = window.URL.createObjectURL(e.target.files[0]);
		      this.uploadImg.push(src);
		
		      //将图片文件转化成base64格式图片
		      var reader = new FileReader();
		      reader.onload = (e) => {
		        //e.target.result  就是从本地读取的图片的base64格式,将它上传给服务器即可
		        //使用axios的post方法上传即可
		      }
		      reader.readAsDataURL(e.target.files[0])
		    },
		    callFile () {
		      //点击添加图片按钮，触发type:"file"的input标签
		      let fileDom = document.querySelector("#file")
		      fileDom.click()
		    },
        open() {
        this.$message({
          message: '上传成功，请等待审核通过',
          type: 'success',
          duration:900
        })
      },
       //几秒后进入跳转页面
    turntoshop(){
        const timejump = 6;
        if(!this.timer){
            this.count = timejump ;
            this.show = false;
            this.timer = setInterval(()=>{
            if(this.count > 0 && this.count <= timejump ){
                this.count--;
            }else{
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
                //跳转的页面写在此处
                this.$router.push({path: '/shop'});
            }
          },100)
        }
    }
  }
};

</script>

<style scoped>
.el-container {
  display: flex;
  flex-direction: column; 
}
input {
		  /* 隐藏默认的"打开文件"样式 */
		  display: none;
		}
.container{
  background: rgba(245,245,245,1);
  height: 100%;
  width: 100%;
}
.titlebox
{
  height: 50px;
  width: 80%;
  background: rgb(255, 255, 255);
  position: absolute;
  top:12%;
  left:10%;
  border-radius: 10px;
}
.title1
{
  position: absolute;
  top:25%;
  left:2%;
  font-weight:550 ;
  color: rgb(78, 78, 78);
}
.uploadwork
{
  height: 420px;
  width: 80%;
  background:rgb(255, 255, 255);
  position: absolute;
  top:23%;
  left:10%;
  border-radius: 10px;
}
.hr{
  position: relative;
  top:12%;
  left:2%;
}
.title2
{
  position: absolute;
  top:5%;
  left:2%;
  font-weight:400 ;
  font-size: 18px;
  color: rgb(78, 78, 78);
}
.uploadbox{
  width:600px;
  height: 500px;
  position: relative;
  top:15%;
  left:0%;
}
.add{
    height: 220px;
    width: 310px;
    position: relative;
    top:2%;
    left:5%;
    border:1px solid rgb(153,153,153);
    border-radius: 5%;
    margin-bottom: 30px;
    background:rgb(245, 244, 244) ;
}
.add ul {
		  
      margin-left: 0px;
		}
.add ul li {
      position: relative;
      left:-40px;
      top: -16px;
		}
.add .addPic img {
		  height: 220px;
		  width: 310px;
      border-radius: 5%;
		}
.icon{
    position: absolute;
    left:40%;
    top:30%;
    color: rgba(255,227,0);
}
.text{
    position: absolute;
    left:25%;
    top:60%;
    font-weight: 500;
    color: rgb(126, 126, 126);
    font-size: 16px;
}
.button1{
    position: absolute;
    top:55%;
    left:5%;
    background-color: rgb(255, 227, 0); /* Green */
    border: none;
    color: rgb(54, 54, 54);
    padding: 10px 32px;
    text-align: center;
    display: inline-block;
    font-size: 16px;
    font-weight: 500;
    border-radius: 2px;
    box-shadow: 0 3px 5px 0 rgba(0,0,0,0.2), 0 3px 5px 0 rgba(0,0,0,0.19);
}

</style>
